<template>
  <view class="layout">
    <!-- 导航栏区域 -->
    <view class="navbar">
      <view class="statusBar" :style="{height:getStatusBarHeight()+'px'}"></view>
      <view class="titleBar" :style="{height:getTitleBarHeight()+'px',marginLeft:getLeftIconLeft()+'px'}" >
        <view class="box">
          <uni-icons type="left" size="25" class="back" @click="goBack"></uni-icons>
          <view class="title">群通知</view>
          <uni-icons type="trash" size="25" class="trash" @click="handleClear"></uni-icons>
        </view>
      </view>
    </view>
    <!-- 填充区域，避免内容被导航栏遮盖 -->
    <view class="fill" :style="{height:getNavBarHeight() +'px'}"></view>

    <!-- 新朋友列表区域 -->
    <view class="newFriend">
      <view 
        v-for="(item, index) in friendList" 
        :key="index" 
        class="friend-item"
        :class="{ 'active': item.isActive }"
        @click="handleItemClick(item)"
      >
        <!-- 头像 -->
        <image 
          class="avatar" 
          :src="'/static/logo.png'" 
        ></image>
        <!-- 右侧内容区域 -->
        <view class="right-content">
          <view class="name-status">
            <text 
              class="name"
              :title="item.name"
            >{{ item.name }}</text>
            <text 
              class="status"
              :class="{ 
                'pending': item.status === '等待验证',
                'agreed': item.status === '已同意' || item.isAccepted
              }"
              @click.stop="handleStatusClick(item)"
            >{{ item.status === '等待验证' ? (item.isAccepted ? '已同意' : '同意') : item.status }}</text>
          </view>
          <view class="desc" :title="item.desc">{{ item.desc }}</view>
          <view class="source-area">
            <view class="source">来源：{{ item.source }}</view>
            <uni-icons 
              type="trash" 
              size="24" 
              class="delete-icon" 
              @click="handleDelete(item, index)"
            ></uni-icons>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { getStatusBarHeight, getTitleBarHeight, getNavBarHeight, getLeftIconLeft } from "@/utils/system.js";
import { ref } from 'vue';

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 清除所有通知
const handleClear = () => {
  uni.showModal({
    title: '确认删除',
    content: '确定要清空所有群通知吗？',
    success: function (res) {
      if (res.confirm) {
        console.log('用户点击确定');
        // 实际项目中这里添加清空通知的API调用
        friendList.value = [];
        uni.showToast({
          title: '已清空所有通知',
          icon: 'none'
        });
      } else if (res.cancel) {
        console.log('用户点击取消');
      }
    }
  });
};

// 模拟好友通知数据
const friendList = ref([
  {
    id: 1,
    name: 'Wasu超级长的用户名测试',
    status: '已同意',
    desc: '我是来自群聊“尚硅谷B站Ja…',
    source: 'QQ群-尚硅谷B站Java53…',
    isActive: false,
    isAccepted: true
  },
  {
    id: 2,
    name: '晴宙',
    status: '已同意',
    desc: '我是来自群聊“程序员派单3群”的…',
    source: 'QQ群-程序员派单3群',
    isActive: false,
    isAccepted: true
  },
  {
    id: 3,
    name: '游戏大师',
    status: '已同意',
    desc: '在职十年全栈，有偿收徒答疑，…',
    source: 'QQ号查找',
    isActive: false,
    isAccepted: true
  },
  {
    id: 4,
    name: '酱紫',
    status: '已同意',
    desc: '我是酱紫',
    source: 'QQ号查找',
    isActive: false,
    isAccepted: true
  },
  {
    id: 5,
    name: '酱紫',
    status: '已同意',
    desc: '我是酱紫',
    source: 'QQ号查找',
    isActive: false,
    isAccepted: true
  },
  {
    id: 6,
    name: '最美不过童话',
    status: '等待验证',
    desc: '请求添加对方为好友',
    source: '',
    isActive: false,
    isAccepted: false
  }
]);

// 处理列表项点击效果
const handleItemClick = (item) => {
  // 重置所有项的激活状态
  friendList.value.forEach(i => {
    i.isActive = false;
  });
  
  // 设置当前项的激活状态（点击效果）
  item.isActive = true;
  
  // 300ms后取消激活状态（模拟点击反馈）
  setTimeout(() => {
    item.isActive = false;
  }, 300);
};

// 处理状态按钮点击（同意/已同意切换）
const handleStatusClick = (item) => {
  if (item.status === '等待验证' && !item.isAccepted) {
    uni.showToast({
      title: '已同意好友邀请',
      icon: 'none'
    });
    
    // 更新状态
    item.isAccepted = true;
    item.status = '已同意';
    
  }
};

// 处理单条通知删除
const handleDelete = (item, index) => {
  uni.showModal({
    title: '确认删除',
    content: `确定要删除 ${item.name} 这条消息？`,
    success: function (res) {
      if (res.confirm) {
        // 从数组中删除该项
        friendList.value.splice(index, 1);
        
        uni.showToast({
          title: '已删除该通知',
          icon: 'none'
        });
      } else if (res.cancel) {
        console.log('用户点击取消');
      }
    }
  });
};
</script>

<style lang="scss" scoped>
.layout {
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background-color: #fff;

    .titleBar {
      display: flex;
      align-items: center;
      padding: 0 30rpx;

      .box {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .back {
          margin-left: -40px;
        }

        .trash {
          margin-right: -40px;
        }

        .title {
          font-size: 18px;
          font-weight: 600;
          color: #333;
          letter-spacing: 1px;
          text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        }
      }
    }
  }
}

// 新朋友列表样式
.newFriend {
  padding: 10rpx 20rpx;
  margin-top: calc(getNavBarHeight() + 10rpx); 
  background-color: #fff;

  .friend-item {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1px solid #f5f5f5;
    transition: background-color 0.2s;
    
    // 点击效果
    &.active {
      background-color: #f5f5f5;
    }

    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }

    .right-content {
      flex: 1;

      .name-status {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10rpx;

        .name {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
          max-width: 60%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .status {
          font-size: 28rpx;
          padding: 4rpx 16rpx;
          border-radius: 40rpx;
          transition: all 0.2s;
          
          // 等待验证状态的特殊样式
          &.pending {
            color: #07c160;
            border: 1px solid #07c160;
          }
          
          // 已同意状态样式
          &.agreed {
            color: #999;
            border: 1px solid #eee;
          }
        }
      }

      .desc {
        font-size: 28rpx;
        color: #666;
        line-height: 40rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1; 
        -webkit-box-orient: vertical;
      }

      .source-area {
        display: flex;
        align-items: center;
        margin-top: 10rpx;
        
        .source {
          font-size: 26rpx;
          color: #999;
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        
        .delete-icon {
          color: #999;
          margin-left: 10rpx;
          cursor: pointer;
          
          &:hover {
            color: #f56c6c;
          }
        }
      }
    }
  }
}
</style>